<template>
  <div id="app" :class="{ 'dark-mode': isDarkMode }">
    <TheHeader v-if="$route.path !== '/auth'" />
    <main>
      <router-view></router-view>
    </main>
    <TheFooter v-if="$route.path !== '/auth'" />
  </div>
</template>

<script>
import TheHeader from './components/TheHeader.vue'
import TheFooter from './components/TheFooter.vue'

export default {
  name: 'App',
  components: {
    TheHeader,
    TheFooter
  },
  data() {
    return {
      isDarkMode: false
    }
  },
  created() {
    // 从 localStorage 读取主题设置
    const savedTheme = localStorage.getItem('theme')
    if (savedTheme === 'dark') {
      this.isDarkMode = true
      document.documentElement.classList.add('dark-mode')
    }
  }
}
</script>

<style>
:root {
  /* 颜色变量 */
  --primary-color: #6c5ce7;
  --secondary-color: #a29bfe;
  --accent-color: #fd79a8;
  --success-color: #00b894;
  --warning-color: #fdcb6e;
  --error-color: #d63031;
  
  /* 文本颜色 */
  --text-color: #2d3436;
  --text-light: #636e72;
  
  /* 背景颜色 */
  --bg-color: #ffffff;
  --card-bg: #f5f6fa;
  --light-color: #ffffff;
  --dark-color: #2d3436;
  
  /* 阴影 */
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  
  /* 过渡 */
  --transition: all 0.3s ease;
}

/* 暗色模式变量 */
.dark-mode {
  --text-color: #dfe6e9;
  --text-light: #b2bec3;
  --bg-color: #2d3436;
  --card-bg: #353b48;
  --light-color: #2d3436;
  --dark-color: #dfe6e9;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--bg-color);
  transition: var(--transition);
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;

  padding: 20px 0;
 
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .container {
    padding: 0 15px;
  }
}
</style> 